<template>
  <div class="home">
    <el-container>
      <el-header height="80px">
        <div>
          <img src="../../assets/下载.jpg" alt />
          <p>梦学谷会员管理系统</p>
        </div>
        <div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{loginUser.username}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="endit">
                <i class="el-icon-edit"></i>修改密码
              </el-dropdown-item>
              <el-dropdown-item command="logout">
                <i class="el-icon-s-fold"></i> 退出系统
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- <el-button type="success">返回登录页面</el-button> -->
      </el-header>
      <el-container>
        <el-aside>
          <el-menu default-active="/welcome" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b" router>
            <el-menu-item index="/welcome">
              <i class="el-icon-s-home"></i> 首页
            </el-menu-item>
            <el-menu-item index="/member" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">
              <i class="el-icon-user-solid"></i> 会员管理
            </el-menu-item>
            <el-menu-item index="/supplier" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">
              <i class="el-icon-s-cooperation"></i> 供应商管理
            </el-menu-item>
            <el-menu-item index="/shop" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">
              <i class="el-icon-s-goods"></i> 商品管理
            </el-menu-item>
            <el-menu-item index="/staff" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading">
              <i class="el-icon-user"></i> 员工管理
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <!-- 修改密码的对话框 对应上面endit事件 -->
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldPass">
          <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
          }
          callback();
        }
      };
      var validatePass1 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入新密码"));
        } else {
          if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        loginUser: JSON.parse(sessionStorage.getItem("loginUsername")),
        dialogVisible: false, //修改密码弹出层
        ruleForm: {
          oldPass: "",
          pass: "",
          checkPass: ""
        },
        rules: {
          oldPass: [{ validator: validatePass, trigger: "blur" }],
          pass: [{ validator: validatePass1, trigger: "blur" }],
          checkPass: [{ validator: validatePass2, trigger: "blur" }]
        },
        fullscreenLoading: false
      };
    },
    methods: {
      //退出,清除路由信息
      //element中Dropdown下拉菜单的触发事件
      handleCommand(command) {
        // 当command等于logout时执行退出登录事件
        if (command == "logout") {
          this.$confirm("亲,确认退出梦学谷后台管理系统吗?", "欢迎为您服务", {
            confirmButtonText: "确定退出",
            cancelButtonText: "我在想想",
            type: "warning"
          })
            .then(() => {
              this.$message({
                type: "success",
                message: "退出成功!"
              });
              this.$router.push("/login");
              sessionStorage.clear("loginUsername");
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消退出"
              });
            });
        }
        // 当command等于logout时执行修改密码事件
        if (command == "endit") {
          this.dialogVisible = true;
        }
      },

      handleClose(done) {
        this.$confirm("确认关闭？")
          .then(_ => {
            done();
          })
          .catch(_ => { });
      },
      submitForm(formName) {
        console.log(formName);
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.$message.success("密码修改成功");
            this.dialogVisible = false;
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      openFullScreen1() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 1000);
      }
    },

    mounted() { }
  };
</script>

<style lang="scss" scoped>
  .home {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .el-container {
      width: 100%;
      height: 100%;

      .el-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #2d3a4b;
        width: 100%;
        height: 100px;

        div {
          display: flex;
          align-items: center;

          p {
            margin-left: 20px;
            font-size: 24px;
            color: white;
            font-weight: 700;
          }

          img {
            height: 60px;
            width: 60px;
            border-radius: 50%;
          }
        }
      }

      .el-container {
        display: flex;
        flex: 1;
        justify-content: space-between;

        .el-aside {
          width: 200px !important;
          background-color: #333744;
        }

        .el-main {
          flex: 1;
          // background: #e4f5ef;
        }
      }
    }
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>